<template>
	<view>
		<uni-nav-bar dark title="赛前设置" fixed :statusBar="true" left-icon="left" @clickLeft="onLeft">
			<block slot="right">
				<view class="city" v-if="tab != 0">
					<view @click="addUser">
						<uni-icons color="#fff" fontFamily="CustomFont" type="plusempty" :size="20"></uni-icons>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view class="tab-box">
			<view :class="tab == 0 ? 'active' : ''" @click="changeTab(0)">比赛设置</view>
			<view :class="tab == 1 ? 'active' : ''" @click="changeTab(1, 'oneTeam')">
				{{info.oneTeam ? info.oneTeam.teamName : ''}}
			</view>
			<view :class="tab == 2 ? 'active' : ''" @click="changeTab(2, 'twoTeam')">
				{{info.twoTeam ? info.twoTeam.teamName : ''}}
			</view>
		</view>
		<view v-if="tab == 0">
			<view class="box">
				<view class="list-box">
					<view class="list">
						<view>比赛时间</view>
						<uni-list-item clickable>
							<template v-slot:footer>
								<uni-datetime-picker ref="date" type="datetime" v-model="info.tournamentBeginTime"
									@change="changeLog">
									<text class="text-time">{{info.tournamentBeginTime ||text}}</text>
								</uni-datetime-picker>
							</template>
						</uni-list-item>
					</view>
					<view class="list">
						<view>比赛阶段</view>
						<uni-list-item rightText="小组赛" class="otherList">
							<template v-slot:footer>
								<uni-data-select placeholder="请选择" collection="opendb-app-list" :localdata="range"
									field="appid as value, name as text" v-model="info.type" @change="changeLog" />
							</template>
						</uni-list-item>
					</view>
					<!-- @click="selectplace" -->
					<view class="list">
						<view>比赛地点</view>
						<view> <uni-easyinput v-model="info.address" placeholder="请输入内容" @focus=""></uni-easyinput>
						</view>
					</view>
					<view class="list">
						<view>统计模式</view>
						<uni-list-item rightText="小组赛" class="otherList">
							<template v-slot:footer>
								<uni-data-select placeholder="请选择" collection="opendb-app-list" :localdata="edition"
									field="appid as value, name as text" v-model="info.statisticsModel"
									@change="changeLog" />
							</template>
						</uni-list-item>
					</view>
					<view class="list">
						<view>比分条开关</view>
						<uni-list-item class="otherList">
							<template v-slot:footer>
								<uni-data-select style="width: 150rpx;" placeholder="请选择" collection="opendb-app-list"
									:localdata="edition2" field="appid as value, name as text"
									v-model="info.equipmentSwitch" @change="changeLog" />
							</template>
						</uni-list-item>
					</view>
					<view class="list">
						<view style="font-size: 30rpx;">视频分切间隔时间单位s</view>
						<view> <uni-easyinput style="width: 150rpx;" v-model="info.timeInterval" placeholder="请输入数字"
								@focus=""></uni-easyinput>
						</view>
					</view>
				</view>
			</view>
			<view class="work-list">
				<view class="work-list-text">向右滑动工作人员,可进行移除操作</view>
				<liu-swipe-action :style="{zIndex: item.zindex}" :index="index"
					@clickItem="clickItemtournament(item.id)" v-for="(item,index) in info.tournamentPersonnelList"
					:key="index">
					<view class="peoplr-list">
						<view class="peoplr-list-left">
							<view class="head">
								<image src="../../static/user.jpg"></image>
							</view>
							<view class="name">
								{{item.createUserName}}
							</view>
						</view>
						<view class="peoplr-list-right">
							<uni-data-select collection="opendb-app-list" class="topSelect"
								field="appid as value, name as text" label="选择" :value="item.type"
								:localdata="rangeWork" @change="(data) => changetournament(data, item)"
								:clear="false" />
						</view>
					</view>
				</liu-swipe-action>
				<button @click="onOkInfo"
					style="width: 80%;margin-top: 20px;font-size: 28rpx;background-color: #da794e;color: #fff;;">确认修改</button>
			</view>
			<view class="bottom-box" v-if="tab == 0">
				<view class="addPeople" @click="goaddWorkPeo">权限管理</view>
			</view>
		</view>

		<view v-else-if="tab != 0">
			<view class="top-box">
				<view class="team-title">
					<view class="team-title-left">
						<view class="team-type">主队</view>
						<view class="team-name">学校名称</view>
					</view>
					<view class="team-title-right" @click="onFangqi">弃权</view>
				</view>
				<view class="color-box">
					<view>队服颜色</view>
					<view style="margin-left: 30rpx;">
						<uni-icons v-for="(item, index) in colorList" type="color-filled" :color="item" size="30"
							@click="onSelectColor(item)"></uni-icons>
						<uni-icons type="more-filled" color="#000000" size="30" @click="open"
							style="margin-left:20rpx"></uni-icons>
						<t-color-picker ref="colorPicker" :color="color" @confirm="onSelectColor"></t-color-picker>
					</view>
				</view>
			</view>

			<!-- 教练组 -->
			<view class="work-list">
				<view class="work-list-text">向右滑动工作人员,可进行移除操作</view>
				<liu-swipe-action :index="index" @clickItem="(index) => {clickItemworkPeople(item.id,index)}"
					v-for="(item,index) in workPeople" :key="index">
					<view class="peoplr-list">
						<view class="peoplr-list-left">
							<view class="head">
								<image src="../../static/user.jpg" v-if="!item.coachPhoto"></image>
								<image :src="imageUrl + item.coachPhoto" v-else></image>
							</view>
							<view class="name">
								{{item.createUserName}}
							</view>
						</view>
						<view class="peoplr-list-right">
							{{type[item.type]}}
						</view>
					</view>
				</liu-swipe-action>

			</view>

			<view class="pepple-list">
				<liu-swipe-action :index="index" @clickItem="(index) => {clickItem(item.id,index)}"
					v-for="(item,index) in baseBasketballPlayersList" :key="index">
					<view class="pepple-list-status">
						<view class="round-box"
							:class="{cur: tab == 1 ? daochengids1.includes(item.id) :  daochengids2.includes(item.id) }"
							@click="daoChang(item, 0, index)">到场</view>
						<view class="round-box" :class="{cur: item.isUp == 1}" @click="selectIsUp(item,1)">首发</view>
						<view class="round-box">
							<image :src="'http://129.211.173.183/api/system/oss/preview/'+item.profilePicture" mode="">
							</image>
						</view>
						<view class="name-box">
							<view class="name-box-name">
								{{item.name}}
							</view>
							<uni-easyinput type="number" @change="(data) => setNum(data,item)"
								:style="{color: tab == 1 ? oneSelectColor : towSelectColor,fontSize: '20rpx'}"
								class="name-box-num" :border="false" :clearable="false" v-model="item.playerNumber"
								placeholder="请输入内容"></uni-easyinput>

							<!-- <view  :style="{color: tab == 1 ? oneSelectColor : towSelectColor}">{{item.playerNumber}}</view> -->
						</view>
						<view>

							<view class="item">
								<uni-icons type="left" size="30"></uni-icons>
							</view>

						</view>
					</view>
				</liu-swipe-action>
			</view>

		</view>
		<view class="onStart" v-if="tab != 0">
			<button @click="onStart">开始计分</button>
		</view>
	</view>
</template>

<script>
	import {
		getseasonTournament,
		putattendanceLog,
		getattendanceLog,
		puttournament
	} from '@/api/season/indx.js'
	import {
		getTournament,
		postTournament,
		getTournamentEdit,
		getTournamentEditPersonnel
	} from '@/api/tournament/index.js';
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	import {
		delbasketballPlayer,
		addbasketballPlayer,
		delcoach,
		postabstention
	} from '@/api/basketballTeam/index.js'
	import {
		putPersonnel,
		delPersonnel
	} from '@/api/personnel/index.js'
	import {
		getcreatePosition,


	} from '@/api/record/index.js'
	import {
		imageUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				imageUrl: imageUrl,
				colorList: ['#000000', '#eeeeee', '#7ba5f9', '#f2d065', '#e8615b', '#7de3cd'],
				oneSelectColor: '',
				towSelectColor: '',
				list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条'],
				tab: 0,
				list: [{
						name: '比赛时间',
						value: ''
					},
					{
						name: '比赛阶段',
						value: ''
					},
					{
						name: '比赛地点',
						value: ''
					},
					{
						name: '统计模式',
						value: ''
					},
					{
						name: '直播付费',
						value: ''
					},
				],
				range: [{
						value: 1,
						text: "小组赛"
					},
					{
						value: 2,
						text: "淘汰赛"
					},
					{
						value: 3,
						text: "四强赛"
					},
					{
						value: 4,
						text: "半决赛"
					},
					{
						value: 5,
						text: "决赛"
					},
					{
						value: 6,
						text: "季军赛"
					},
					{
						value: 7,
						text: "排位赛"
					},
					{
						value: 8,
						text: "常规赛"
					},
					{
						value: 9,
						text: "季后赛"
					},
				],
				edition: [{
						value: 1,
						text: "基础版"
					},
					{
						value: 2,
						text: "进阶版"
					},
				],
				edition2: [{
						value: 0,
						text: "关"
					},
					{
						value: 1,
						text: "开"
					},
				],
				info: {
					teamOneId: '',
					tournamentBeginTime: '',
					type: '',
					seasonId: '',
					contestId: '',
					statisticsModel: ''
				},
				text: '请选择时间',
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 0.6
				},
				info: {},
				fordata: 'oneTeam',
				baseBasketballPlayersList: [],
				workPeople: [],
				rangeWork: [{
						value: 1,
						text: '主裁'
					},
					{
						value: 2,
						text: '副裁'
					},
					{
						value: 3,
						text: '计录台'
					},
					{
						value: 4,
						text: '技术代表'
					},
					{
						value: 5,
						text: '赛季管理员'
					}
				],
				type: {
					'1': "主裁",
					'2': "副裁",
					'3': "计录台",
					'4': "技术代表",
					'5': "赛季管理员",
				},
				daoChangList1: [],
				daoChangList2: [],
				daochengids1: [],
				daochengids2: [],
				hide: false,
			}
		},
		components: {
			tColorPicker
		},
		methods: {
			onOkInfo() {
				this._postTournament();
			},
			onFangqi() {
				let that = this
				uni.showModal({
					content: '确定弃权吗？',
					success: (res) => {
						if (res.confirm) {
							console.log(this.tab)
							console.log(this.info[this.tab == 1 ? 'oneTeam' : 'twoTeam'])
							postabstention({
								id: this.id,
								abstentionId: this.info[this.tab == 1 ? 'oneTeam' : 'twoTeam'].id
							}).then(res => {
								that.$modal.msg(res.msg)
								setTimeout(() => {
									uni.navigateBack();
								}, 1000)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			setNum(data, item) {
				console.log(data, item)

				addbasketballPlayer('put', {
					...item,
					playerNumber: data,
					playerId: this.tab == 1 ? this.info.oneTeam.id : this.info.twoTeam.id
				}).then(res => {
					this.$modal.msg(res.msg)
				}).catch(err => {
					console.log('1')
				})
			},
			// 添加球员
			addUser() {
				if (this.tab == 1) {
					let {
						teamName,
						id,
						teamLogo
					} = this.info.oneTeam
					uni.navigateTo({
						url: `/pages/basketballTeam/addplayer?player=${id}&name=${teamName}&url=${teamLogo}`
					})
				} else {
					let {
						teamName,
						id,
						teamLogo
					} = this.info.twoTeam
					uni.navigateTo({
						url: `/pages/basketballTeam/addplayer?player=${id}&name=${teamName}&url=${teamLogo}`
					})
				}
			},
			daoChang(item, isTab, listindex) {
				if (item.isUp == 1) {
					this.$modal.msg('请先取消首发')
					return;
				}
				let arrIndex;
				if (this.tab == 1 || isTab == 1) {
					console.log(item.id)
					let index = this.daoChangList1.findIndex(data => data.id == item.id)
					arrIndex = index;
					if (index != -1) {
						this.daochengids1.splice(index, 1)
						this.daoChangList1.splice(index, 1)
					} else {
						let contestId = uni.getStorageSync('contestId')
						let basketballTeamId = this.info.oneTeam.id
						this.daoChangList1.push({
							...item,
							basketballTeamId,
							contestId,
							isAttendance: 1,
							tournamentId: this.id,
							basketballPlayerId: item.id
						})
						this.daochengids1.push(item.id)
					}
				} else {
					let index = this.daoChangList2.findIndex(data => data.id == item.id)
					arrIndex = index;
					if (index != -1) {
						this.daochengids2.splice(index, 1)
						this.daoChangList2.splice(index, 1)
					} else {
						let contestId = uni.getStorageSync('contestId')
						let basketballTeamId = this.info.twoTeam.id

						this.daoChangList2.push({
							...item,
							basketballTeamId,
							contestId,
							isAttendance: 1,
							tournamentId: this.id,
							basketballPlayerId: item.id
						})
						this.daochengids2.push(item.id)
					}
				}
				item.isDaochang = item.isDaochang == 1 ? 0 : 1
				this.chongpai(this.baseBasketballPlayersList)
			},
			delChange(item) {
				if (this.tab == 1) {
					let index = this.daoChangList1.findIndex(data => data.id == item.id)
					this.daochengids1.splice(index, 1)
					this.daoChangList1.splice(index, 1)
				} else {
					let index = this.daoChangList2.findIndex(data => data.id == item.id)
					this.daochengids2.splice(index, 1)
					this.daoChangList2.splice(index, 1)
				}

			},
			addChage(item, isTab) {
				if (isTab == 1) {
					let contestId = uni.getStorageSync('contestId')
					let basketballTeamId = this.info.oneTeam.id
					let index = this.daoChangList1.findIndex(data => data.id == item.id)
					if (index == -1) {
						this.daoChangList1.push({
							...item,
							basketballTeamId,
							contestId,
							isAttendance: 1,
							tournamentId: this.id,
							basketballPlayerId: item.id
						})
						this.daochengids1.push(item.id)
					}

				} else {
					let index = this.daoChangList2.findIndex(data => data.id == item.id)
					let contestId = uni.getStorageSync('contestId')
					let basketballTeamId = this.info.twoTeam.id
					if (index == -1) {
						this.daoChangList2.push({
							...item,
							basketballTeamId,
							contestId,
							isAttendance: 1,
							tournamentId: this.id,
							basketballPlayerId: item.id
						})
						this.daochengids2.push(item.id)
					}

				}
			},
			onStart() {

				// let one = this.info.oneTeam.baseBasketballPlayersList.filter(item => item.isUp == 1)
				// let two = this.info.twoTeam.baseBasketballPlayersList.filter(item => item.isUp == 1)
				// console.log(two)
				// if (!one || one.length < 5) {
				// 	this.$modal.msg('球队必须有五个首发');
				// 	return;
				// }
				// if (!two || two.length < 5) {
				// 	this.$modal.msg('球队必须有五个首发');
				// 	return;
				// }
				let arr = [...this.daoChangList1, ...this.daoChangList2]
				arr.forEach(item => {
					delete item.id
				})
				putattendanceLog(arr)
				puttournament({
					state: 1,
					id: this.id
				})
				// getcreatePosition({tournamentId: this.id})
				uni.setStorageSync('one', this.info.oneTeam.baseBasketballPlayersList)
				uni.setStorageSync('two', this.info.twoTeam.baseBasketballPlayersList)

				uni.setStorageSync('info', this.info)
				uni.navigateTo({
					url: '/pages/record/record?id=' + this.id
				})
			},
			selectIsUp(item, index) {
				let seasonId = uni.getStorageSync('seasonId')
				let contestId = uni.getStorageSync('contestId')
				let isUp = item.isUp == 1 ? 0 : 1
				item.isUp = item.isUp == 1 ? item.isUp = 0 : item.isUp = 1;
				if (item.isUp) {
					item.isDaochang = 1;
				}

				if (isUp) {
					this.addChage(item, this.tab)
				}
				uni.showLoading({
					title: '排序中'
				})
				addbasketballPlayer('put', {
					...item,
					isUp: isUp,
					tournamentId: this.id,
					seasonId: seasonId,
					contestId,
					playerId: item.id
				}).then(res => {
					uni.hideLoading()
					//item.isUp = item.isUp == 1 ? item.isUp = 0 : item.isUp = 1;
					console.log(this.baseBasketballPlayersList, '--------------------')
					this.chongpai(this.baseBasketballPlayersList)
					// this.getInfo()

				})
			},
			changetournament(data, item) {
				console.log(data, item)
				let contestId = uni.getStorageSync('contestId');
				let organizationId = uni.getStorageSync('scoringWay')
				item.type = data;
				item.userId = uni.getStorageSync('userId')
				let seasonId = uni.getStorageSync('seasonId')
				putPersonnel({
					...item,
					contestId,
					organizationId,
					seasonId
				}).then(res => {
					this.getInfo()
				})
			},
			// 选择颜色
			onSelectColor(item) {
				if (item.hex) {
					item = item.hex
				}
				console.log(item)
				if (this.tab == 1) {
					this.oneSelectColor = item;
				} else {
					this.towSelectColor = item
				}
				this._postTournament();
			},
			clickItemworkPeople(id) {
				uni.showModal({
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							delcoach(id).then(res => {
								this.getInfo()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			clickItemtournament(id, e) {
				uni.showModal({
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							delPersonnel(id).then(res => {
								this.getInfo()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			//点击操作回调事件
			clickItem(id, e) {
				console.log(id)
				uni.showModal({
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							delbasketballPlayer(id).then(res => {
								this.getInfo()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			onLeft() {
				uni.navigateBack()
			},
			changeLog(val) {
				console.log(val);

				//this._postTournament()
			},
			chongpai(list) {
				// console.log(list, '----list');
				let arr = list;
				let isUplist = arr.filter(item => {
					return item.isUp == 1;
				}).sort((one, tow) => {
					return one.playerNumber - tow.playerNumber;
				})
				let daoList = arr.filter(item => {
					return item.isDaochang == 1 && item.isUp != 1;
				}).sort((one, tow) => {
					return one.playerNumber - tow.playerNumber;
				})
				let other = arr.filter(item => {
					return item.isDaochang != 1 && item.isUp != 1;
				}).sort((one, tow) => {
					return one.playerNumber - tow.playerNumber;
				})
				// console.log(daoList,'-------daoList');
				// console.log(other,'-------other');
				// console.log(isUplist,'-------isUplist');
				// console.log([...isUplist,...daoList,...other])
				this.baseBasketballPlayersList = [...isUplist, ...daoList, ...other]
				// let newArr1 = this.tab == 1 ? this.daochengids1 : this.daochengids2;


				// let daoList = JSON.parse(JSON.stringify(this.tab == 1 ? this.daoChangList1 : this.daoChangList2)).filter(item =>{ 
				// 	let selectIndex = isUplist.findIndex(data => item.id == data.id)
				// 	console.log(selectIndex)
				// 	return item.isUp != 1 && selectIndex == -1
				// }).sort((one, tow) => {
				// 	return one.playerNumber - tow.playerNumber;
				// })
				// console.log(daoList)
				// let other = arr.filter(item => {
				// 	return !newArr1.includes(item.id) && item.isUp != 1;
				// })
				// this.baseBasketballPlayersList = [...isUplist,...daoList,...other.sort((a,b) => a.playerNumber - b.playerNumber)];

				// console.log(this.baseBasketballPlayersList)
			},
			changeTab(index, type) {
				this.tab = index;
				if (type) {
					this.chongpai(this.info[type].baseBasketballPlayersList)

					this.workPeople = this.info[type].baseCoachList
					// console.log(this.baseBasketballPlayersList);
				}
				if (index != 0) {
					this._postTournament();
				}
			},
			selectplace() {
				uni.navigateTo({
					url: '/pages/competition/place'
				})
			},
			open(item) {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			goaddWorkPeo() {
				uni.setStorageSync('otherList', this.info.tournamentPersonnelList)
				uni.navigateTo({
					url: '/pages/competition/addWorkPeople?id=' + this.id
				})
			},
			_postTournament() {
				let leagueId = uni.getStorageSync('contestId');
				let userId = uni.getStorageSync('userId')
				getTournamentEdit({
					equipmentSwitch: this.info.equipmentSwitch,
					timeInterval: this.info.timeInterval,
					address: this.info.address,
					contestId: leagueId,
					id: this.info.id,
					tournamentBeginTime: this.info.tournamentBeginTime,
					statisticsModel: this.info.statisticsModel, //统计模式
					type: this.info.type, //比赛阶段
					updateUserId: userId, //修改人id
					updateUserName: '', //修改人姓名
					teamOneColour: this.oneSelectColor,
					teamTwoColour: this.towSelectColor
				}).then(res => {
					// console.log("请求成功了")
					getseasonTournament(this.id).then(res => {
						this.info = res.data;
					});
				})
			},
			_getTournamentEditPersonnel() {
				console.log(this.workPeople, "修改赛事工作人员")
				let leagueId = uni.getStorageSync('contestId');
				let userId = uni.getStorageSync('userId')
				getTournamentEditPersonnel({

					contestId: leagueId,
					id: this.info.id,
					updateUserId: userId, //修改人id
					level: 1, //工作人员层级：0:联赛工作人员;1:比赛工作人员;
					seasonId: '', //赛季id
					tournamentId: this.id, //赛事id
					type: this.type, //类型：1:主裁;2:副裁;3:计录台;4:技术代表;5:赛季管理员
					userId: '', //当前角色绑定的用户id
				}).then(res => {
					console.log(111111)
				})
			},
			getInfo() {
				getseasonTournament(this.id).then(res => {
					// console.log('---', res)
					this.info = res.data;
					let {
						teamOneColour,
						teamTwoColour
					} = res.data
					this.oneSelectColor = teamOneColour
					this.towSelectColor = teamTwoColour
					// console.log(this.type)
					this.workPeople = []
					this.workPeople = this.info[this.tab == 1 ? 'oneTeam' : 'twoTeam'].baseCoachList




					if (!this.hide) {
						res.data.oneTeam.baseBasketballPlayersList.forEach(item => {
							// console.log(item);
							if (item.isUp) {
								this.addChage(item, 1)
							}

						})

						res.data.twoTeam.baseBasketballPlayersList.forEach(item => {
							if (item.isUp) {
								this.addChage(item, 2)
							}
						})
						this.hide = true;
					}

					if (this.tab) {
						this.baseBasketballPlayersList = [];
						// this.baseBasketballPlayersList = this.info[this.tab == 1 ? 'oneTeam' : 'twoTeam']
						// 	.baseBasketballPlayersList
						// setTimeout(() => {
						// 	this.chongpai(listdata)
						// })
						let list = this.info[this.tab == 1 ? 'oneTeam' : 'twoTeam']
							.baseBasketballPlayersList.map(item => {
								return {
									...item,
									isDaochang: item.isUp == 1 ? 1 : 0
								}
							})
						console.log(list, '----list')
						this.chongpai(list)

					}


					let arr = Array.from({
						length: this.info.tournamentPersonnelList.length
					}, (_, i) => i + 1).reverse()
					this.info.tournamentPersonnelList.forEach((item, index) => {
						item.zindex = arr[index]
					})

				});
			},
		},

		onLoad({
			id
		}) {
			this.id = id;
			// this.getInfo();
		},
		onShow() {
			this.getInfo()
			let contestId = uni.getStorageSync('contestId')
			getattendanceLog({
				basketballPlayerId: 8,
				contestId
			})
		},
		onHide() {
			this.hide = true;
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7fbfc;
		box-sizing: border-box;
	}

	.header-left {
		width: 20px;
		height: 20px;
	}

	.tab-box {
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-around;
		color: #c7c7c7;
		font-size: 36rpx;
		padding: 20rpx 0;

		.active {
			padding-bottom: 10rpx;
			color: #da794e;
			border-bottom: 2rpx solid #da794e;
		}
	}

	.box {
		width: 100%;

		.list-box {
			width: 100%;
			margin-top: 20rpx;
			background: #fff;
			padding: 0 32rpx;

			.list {
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 500;
				border-bottom: 1rpx solid #f7fbfc;

				.otherList {
					::v-deep.uni-list-item__container {
						overflow: inherit;
						border: 0;
						padding: 0;
						display: block;
						padding-left: 0 !important;
					}
				}

				::v-deep.uni-list-item__container {
					overflow: inherit;
					border: 0;
					padding: 0;
					display: block;
					padding-left: 0 !important;
				}

				::v-deep.uni-select__selector {
					z-index: 9999;
				}

				.orange {
					color: #da794e;
				}
			}
		}
	}

	.work-list {
		width: 100%;
		padding-bottom: 200rpx;

		.work-list-text {
			padding: 10rpx 32rpx;
			background: #f7f7f7;
			color: #bbbbbb;
		}

		.peoplr-list {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.peoplr-list-left {
				display: flex;
				align-items: center;

				.head {
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}

				.name {
					margin-left: 30rpx;
				}
			}

			.peoplr-list-right {}
		}
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		line-height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;
		padding: calc(env(safe-area-inset-bottom) + 20rpx) 0;
		background: #fff;
		z-index: 11;

		view {
			width: 80%;
			border-radius: 10rpx;
			font-size: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.review-box {
			background: #fcefe7;
			color: #da794e;
		}

		.addPeople {
			background: #da794e;
			color: #fff;
		}
	}

	.top-box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		background: #fff;
		margin-top: 20rpx;

		.team-title {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #f9f9f9;

			.team-title-left {
				display: flex;
				align-items: center;

				.team-type {
					display: flex;
					align-items: center;
					padding: 2rpx 10rpx;
					border: 2rpx solid #da794e;
					color: #da794e;
					font-size: 22rpx;
					border-radius: 4rpx;
				}

				.team-name {
					font-size: 28rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.team-title-right {
				background: #eaeeef;
				padding: 10rpx 30rpx;
				color: #9e9e9e;
				border-radius: 6rpx;
			}
		}

		.color-box {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			color: #9e9e9e;
			font-size: 24rpx;
		}
	}

	.pepple-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		background: #fff;
		margin-top: 20rpx;

		.pepple-list-status {
			width: 100%;
			display: flex;
			padding: 20rpx 0;

			.round-box {
				margin-right: 30rpx;
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 50%;
				font-size: 26rpx;
				font-weight: 800;
				background: #eaeaea;
				color: #fff;

				&.cur {
					background-color: $btn-bg-color;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.active {
				background: #da794e;
			}

			.name-box {
				padding: 0 0rpx 0 20rpx;
				border: 2rpx solid #eaeaea;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				width: calc(100% - 400rpx);

				.name-box-name {
					width: 180rpx;
					text-align: center;
					color: #9e9e9e;
					padding: 0 20rpx;
				}

				.name-box-num {

					::v-deep.is-input-border {
						border: none !important;
						font-size: 32rpx !important;

						.uni-easyinput__content-input {
							font-size: 32rpx;
							padding-left: 0 !important;
							padding-right: 0 !important;
						}
					}

					// padding: 0 20rpx;
					color: #da794e;
					height: 60rpx;
					width: 120rpx;
					text-align: center;
					line-height: 60rpx;
					border-left: 2rpx solid #eaeaea;
					font-size: 32rpx;
					overflow: hidden;
				}
			}
		}
	}

	.topSelect {
		::v-deep.uni-select {
			width: 30%;
			z-index: 14;
			position: absolute;
			right: 10px;
		}
	}

	.onStart {
		padding-top: 50px;
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		button {
			width: 80%;
			background-color: $btn-bg-color;
			color: #fff;
		}
	}
</style>